<template>
    <div class="card" >
        <el-card shadow="hover" style="width: 50%" class="box-card input_style" v-loading="loading">
            <div style="margin-top: 50px; position: relative">
                <div class="progress_class">
                    <div class="text_class">{{$i18n.t('LOAN_SINGLE_AMOUNT')}}</div>
                    <div style="font-size: 17px; text-align: center; font-weight: 500">{{ loan.total }}</div>
                </div>
                <el-progress type="circle" :percentage="100" :width="100" color="#61A0A8" :show-text="false"></el-progress>
            </div>
            <div ref="loan" style="width:85%; height: 250px;"></div>
        </el-card>&nbsp;
        <el-card shadow="hover" style="width: 50%" class="box-card input_style" v-loading="loading">
            <div style="margin-top: 50px; position: relative">
                <div class="progress_class" style="margin-top: 25px">
                    <div class="text_class">{{$i18n.t('TOTAL_CONVERSION_RATE')}}</div>
                    <div style="font-size: 17px; text-align: center; font-weight: 500">{{ conversion.total }}%</div>
                </div>
                <el-progress type="circle" :percentage="conversion.total" :width="100" color="#61A0A8" :show-text="false"></el-progress>
            </div>
            <div ref="conversion" style="width:85%; height: 250px;"></div>
        </el-card>
    </div>
</template>

<script>
    import ECharts from 'echarts/lib/echarts'

    export default {
        name: 'LoanOverView',
        props: {
            loan: { type: Object, required: true },
            conversion: { type: Object, required: true },
            loading: {
                type: Boolean,
                required: true
            }
        },
        watch: {
            loan: {
                handler: function (newVal) {
                    const channel = []
                    const oldUser = []
                    const newUser = []
                    newVal.data.forEach(item => {
                        channel.push(item.channel)
                        oldUser.push(item.old)
                        newUser.push(item.new)
                    })
                    // 新用户图表
                    const charts = ECharts.init(this.$refs.loan)
                    charts.setOption({
                        color: ['#D48265', '#749F83'],
                        legend: {}, // 标注位置
                        tooltip: {
                            trigger: 'axis'
                        }, // 提示线
                        grid: {
                            left: 100
                        },
                        yAxis: {
                            // y轴的设置
                            type: 'category', // 不连续的字符串
                            data: channel
                        },
                        xAxis: {
                            // x轴的设置
                            splitLine: { show: false } // 去除网格线
                        },
                        series: [ // 每个形状的设置
                            {
                                name: this.$t('NEW'),
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            // 让数据为0时不显示
                                            formatter: (val) => {
                                                if (val.value !== 0) {
                                                    return val.value
                                                } else {
                                                    return ''
                                                }
                                            }
                                        }
                                    }
                                },
                                data: newUser
                            },
                            {
                                name: this.$t('OLD'),
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            // 让数据为0时不显示
                                            formatter: (val) => {
                                                if (val.value !== 0) {
                                                    return val.value
                                                } else {
                                                    return ''
                                                }
                                            }
                                        }
                                    }
                                },
                                data: oldUser
                            }
                        ]
                    })
                },
                deep: true
            },
            conversion: {
                handler: function (newVal) {
                    const channel = []
                    const oldUser = []
                    const newUser = []
                    newVal.data.forEach(item => {
                        channel.push(item.channel)
                        oldUser.push(item.old)
                        newUser.push(item.new)
                    })
                    // 新用户图表
                    const charts = ECharts.init(this.$refs.conversion)
                    charts.setOption({
                        color: ['#D48265', '#749F83'],
                        legend: {}, // 标注位置
                        tooltip: {
                            // 设置百分号
                            trigger: 'axis',
                            formatter: '{b0}<br/>{a0}: {c0}%<br/>{a1}: {c1}%'
                        }, // 提示线
                        grid: {
                            left: 100
                        },
                        yAxis: {
                            // y轴的设置
                            type: 'category', // 不连续的字符串
                            data: channel
                        },
                        xAxis: {
                            // x轴的设置
                            splitLine: { show: false }, // 去除网格线
                            axisLabel: {
                                formatter: function (val) {
                                    return val + '%'
                                }
                            }
                        },
                        series: [ // 每个形状的设置
                            {
                                name: this.$t('NEW'),
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            // 添加百分号,让数据为0时不显示
                                            formatter: (val) => {
                                                if (val.value !== 0) {
                                                    return (val.value) + '%'
                                                } else {
                                                    return ''
                                                }
                                            }
                                        }
                                    }
                                },
                                data: newUser
                            },
                            {
                                name: this.$t('OLD'),
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            // 添加百分号，让数据为0时不显示
                                            formatter: (val) => {
                                                if (val.value !== 0) {
                                                    return (val.value) + '%'
                                                } else {
                                                    return ''
                                                }
                                            }
                                        }
                                    }
                                },
                                data: oldUser
                            }
                        ]
                    })
                },
                deep: true
            }
        },
        data () {
            return {
                barSetting: {
                    // 转成百分数
                    xAxisType: ['percent', 'percent']
                }
            }
        }
    }
</script>
<style scoped lang="less">
    .card {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        margin-bottom: 20px;
    }
    .box-card{
        width: 33%;
        height: 260px;
    }
    .input_style{
        div{
            float: left;
        }
    }
    .progress_class{
        z-index: 100;
        position:absolute;
        margin-left:20px;
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        .text_class{
            width: 60px;
            font-size: 12px;
            text-align: center;
        }
    }
</style>
